<template>
  <el-row :gutter="40" class="panel-group">
    <el-col :xs="6" :sm="6" :lg="3" class="card-panel-col">
      <div class="card-panel card-p">
        <p>累计运行时间</p>
        <p>10天</p>
        <p>21.2小时</p>
      </div>
    </el-col>
    <el-col :xs="6" :sm="6" :lg="3" class="card-panel-col">
      <div class="card-panel card-pan">
        <p>累计保护数据</p>
        <p>199.01MB</p>
      </div>
    </el-col>
    
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-top">
          <p>数据中心</p>
          <el-select
            v-model="dataConter"
            @change="handlerChange"
          >
            <el-option  label="所有" value=""></el-option>
            <el-option
              v-if="dictDataCenter.length > 0"
              v-for="(item,index) in dictDataCenter"
              :key="index"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </div>
        <div class="card-bot">
          <pie-chart :pieChartArr="pieCenterArr" :pieChartTitle="pieCenterTitle" />
          <div class="card-bot-right">
            <p>数据中心总数</p>
            <p>{{dataCenterObj?dataCenterObj.dataCenterNumber:''}}</p>
            <p>正常运行总数：{{dataCenterObj?dataCenterObj.normalNumber:''}}</p>
            <p>异常运行总数：{{dataCenterObj?dataCenterObj.abnormalNumber:''}}</p>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-top">
          <p>品牌</p>
          <el-select
            v-model="dataBackup"
            @change="handlerChangeBrand"
          >
            <el-option  label="所有" value=""></el-option>
            <el-option
              v-if="dictBackup.length > 0"
              v-for="(item,index) in dictBackup"
              :key="index"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </div>
        <div class="card-bot">
          <pie-chart :pieChartArr="pieBrandArr" :pieChartTitle="pieBrandTitle" />
          <div class="card-bot-right">
            <p>品牌总数</p>
            <p>{{dataBrandObj?dataBrandObj.brandNumber:''}}个</p>
            <p>正常运行总数：{{dataBrandObj?dataBrandObj.normalNumber:''}}</p>
            <p>异常运行总数：{{dataBrandObj?dataBrandObj.abnormalNumber:''}}</p>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-top">
          <p>设备数据</p>
          <el-select
            v-model="dataDevice"
            @change="handlerChangeDevice"
          >
            <el-option
              v-if="dictDevice.length > 0"
              v-for="(item,index) in dictDevice"
              :key="index"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </div>
        <div class="card-bot">
          <pie-chart :pieChartArr="pieDeviceArr" :pieChartTitle="pieDeviceTitle" />
          <div class="card-bot-right">
            <p>设备总数</p>
            <p>{{dataDeviceObj?dataDeviceObj.total:''}}</p>
            <p>存储总量：{{dataDeviceObj?dataDeviceObj.totalStorage:''}}TB</p>
            <p>可用容量：{{dataDeviceObj?dataDeviceObj.availableCapacity:''}}TB</p>
          </div>
        </div>
      </div>
    </el-col>

  </el-row>
</template>

<script>
import {listCenter,selectDataCenterInstrumentPanelListCenter} from '@/api/system/center'
import {listBrand} from '@/api/system/brand'
import {listDevice,instrumentPanelListDevice} from '@/api/system/device'

import CountTo from 'vue-count-to'
import PieChart from './echarts/PieChart.vue'

export default {
  props: {
    dictDataCenter: {
      type: Array,
      default: () => []
    },
    dictBackup: {
      type: Array,
      default: () => []
    },
    dictDevice: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dataConter: "", // 数据中心
      dataBackup: "", // 品牌
      dataDevice: 1, // 设备
      dataCenterObj: {
        dataCenterNumber: '',
        normalNumber: '',
        abnormalNumber: '',
        percent: '',
      },
      dataBrandObj: {
        brandNumber: '',
        normalNumber: '',
        abnormalNumber: '',
        percent: '',
      },
      dataDeviceObj: {
        brandNumber: '',
        normalNumber: '',
        abnormalNumber: '',
        percent: '',
      },
      pieCenterArr: [],
      pieCenterTitle: 0,
      pieBrandArr: [],
      pieBrandTitle: 0,
      pieDeviceArr: [],
      pieDeviceTitle: 0,
    }
  },
  components: {
    CountTo,
    PieChart
  },
  mounted() {
    this.getListDataCenter()
    this.getListBrand()
    this.getinstrumentPanel()
  },
  methods: {
    handlerChange(val) {
      this.getListDataCenter()
    },
    handlerChangeBrand(val) {
      this.getListBrand()
    },
    handlerChangeDevice() {
      this.getinstrumentPanel()
    },
    getListDataCenter() {
      let params = {
        dataCenterName: this.dataConter
      }
      selectDataCenterInstrumentPanelListCenter(params).then((res) => {
        this.dataCenterObj = res
        if(res.normalNumber == 1 && res.abnormalNumber == 0) {
          this.pieCenterTitle = 100
        }else {
          this.pieCenterTitle = res.percent
        }
        this.pieCenterArr = []
        
        for(let item in res) {
          if(['normalNumber','abnormalNumber'].includes(item)) {
            let obj = {
              value: res[item],
              name: item == 'normalNumber'?'正常': '异常'
            }
            this.pieCenterArr.push(obj)
          }
        }
      })
    },
    getListBrand() {
      let params = {
        brandName: this.dataBackup
      }
      listBrand(params).then((res) => {
        if(res.code == 200) {
          this.dataBrandObj = res.rows[0]
          if(this.dataBrandObj.normalNumber == 1 && this.dataBrandObj.abnormalNumber == 0) {
            this.pieBrandTitle = 100
          }else {
            this.pieBrandTitle = res.rows[0].percent
          }
          this.pieBrandArr = []
          for(let item in res.rows[0]) {
            if(['normalNumber','abnormalNumber'].includes(item)) {
              let obj = {
                value: res.rows[0][item],
                name: item == 'normalNumber'?'正常': '异常'
              }
              this.pieBrandArr.push(obj)
            }
          }
        }
      })
    },
    getinstrumentPanel() {
      let params = {
        id: this.dataDevice
      }
      instrumentPanelListDevice(params).then((res) => {
        this.dataDeviceObj = res
        this.pieDeviceTitle = res.percent
        // 已用容量(usedSpaceCapacity)=总量-可用容量
        this.dataDeviceObj.usedSpaceCapacity = res.totalStorage - res.availableCapacity
        this.pieDeviceArr = []
        for(let item in this.dataDeviceObj) {
          if(['usedSpaceCapacity','availableCapacity'].includes(item)) {
            let obj = {
              value: res[item],
              name: item == 'usedSpaceCapacity'?'已用容量': '可用容量'
            }
            this.pieDeviceArr.push(obj)
          }
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  // margin-top: 18px;
  margin-bottom: 30px;

  .card-p {
    background: #0052d9 !important;
    color: #fff !important;
    padding-left: 30px !important;
    p {
      margin: 10px 0;
    }
    p:nth-child(2) {
      margin-top: 20px !important;
      margin-bottom: 0px !important;
    }
    p:nth-child(3) {
      font-size: 28px !important;
    }
  }
  .card-pan {
    background: #229a75 !important;
    color: #fff !important;
    padding-left: 30px !important;
    p {
      margin: 10px 0;
    }
    p:nth-child(2) {
      margin-top: 42px !important;
      margin-bottom: 0px !important;
      font-size: 28px !important;
    }
  }
  .card-panel {
    height: 171px;
    // cursor: pointer;
    font-size: 12px;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);
    border-radius: 3px;
    padding: 10px;

    .card-top {
      display: flex;
      justify-content: space-between;
      
      ::v-deep .el-select {
        width: 35%;
      }
      ::v-deep .el-input--medium .el-input__inner {
        height: 25px;
        line-height: 25px;
        border-radius: 10px;
        background: #ececec;
      }
      ::v-deep .el-input__suffix {
        top: 6px;
      }
    }
    .card-bot {
      display: flex;

      .card-bot-right {
        padding-left: 20px;
        font-size: 16px;
        p:nth-child(2) {
          font-size: 28px;
          padding: 10px 0;
        }
      }
    }
  }

}
</style>